<script setup>
import { ref } from 'vue'
import { getHasSkuAPI, skuOnSaleAPI, skuCancelSaleAPI, getSkuInfoAPI, deleteSkuAPI } from '@/api/product/sku'
import { ElMessage } from 'element-plus'

const currentPage = ref(1)

const pageSize = ref(10)

const total = ref(0)

const skuList = ref([])

// 获取已有sku方法
const getHasSku = async (pager = 1) => {
  currentPage.value = pager
  let res = await getHasSkuAPI(currentPage.value, pageSize.value)
  if(res.code === 200) {
    skuList.value = res.data.records
    total.value = res.data.total
  }
}

getHasSku()

// 页码变化时调用, 然而并不需要，可以直接传参给我们上方写的获取sku方法
const handleSizeChange = () => {
  getHasSku()
}

// 更新商品销售状态
const updateSale = async (row) => {
  if(row.isSale === 1) {
    await skuCancelSaleAPI(row.id)
    ElMessage({
      type: 'success',
      message: '下架成功'
    })
    getHasSku(currentPage.value)
  } else {
    await skuOnSaleAPI(row.id)
    ElMessage({
      type: 'success',
      message: '上架成功'
    })
    getHasSku(currentPage.value)
  }
}

// 更新已有的sku
const updateSku = () => {
  ElMessage({
    type: 'success',
    message: '程序员正在努力更新中....'
  })
}

// 控制商品详情显隐
const drawer = ref(false)
// 商品信息
const skuInfo = ref({})

// 查看sku
const findSku = async (row) => {
  let res = await getSkuInfoAPI(row.id)
  if(res.code === 200) {
    skuInfo.value = res.data
    drawer.value = true
  }
}

// 删除商品
const deleteSku = async (row) => {
  let res = await deleteSkuAPI(row.id)
  if(res.code === 200) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    getHasSku(skuList.value.length > 1 ? currentPage.value : currentPage.value - 1)
  } else {
    ElMessage({
      type: 'error',
      message: '系统数据不能删除'
    })
  }
}
</script>

<template>
  <el-card>
    <el-table border style="margin: 20px 0;" :data="skuList">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="名称" show-overflow-tooltip width="300" prop="skuName"></el-table-column>
      <el-table-column label="描述" show-overflow-tooltip width="300" prop="skuDesc"></el-table-column>
      <el-table-column label="图片" width="300">
        <template #default="{row}">
          <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px;">
        </template>
      </el-table-column>
      <el-table-column label="重量(克)" width="300" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" width="300" prop="price"></el-table-column>
      <el-table-column label="操作" width="300px" fixed="right">
        <template #default="{row}">
          <el-button :type="row.isSale === 1 ? 'info' : 'success'  " :icon="row.isSale === 1 ? 'Bottom' : 'Top'" @click="updateSale(row)"></el-button>
          <el-button type="primary" icon="Edit" @click="updateSku"></el-button>
          <el-button icon="InfoFilled" @click="findSku(row)"></el-button>
          <el-popconfirm
          :title="`你确定要删除${row.skuName}吗？`"
          @confirm="deleteSku(row)"
          width="200">
          <template #reference><el-button type="danger" icon="Delete"></el-button></template>
          </el-popconfirm>
          
          
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    v-model:current-page="currentPage"
    :page-sizes="[10, 15, 20, 25]"
    v-model:page-size="pageSize"
    layout=" prev, pager, next, jumper, ->, sizes,total"
    :total="total"
    :background="true"
    @current-change="getHasSku(currentPage, pageSize)"
    @size-change="handleSizeChange">
    </el-pagination>
    <!-- 抽屉组件：展示商品详情 -->
    <el-drawer v-model="drawer" direction="rtl" size="30%">
      <template #header>
        <h4>查看商品详情</h4>
      </template>
      <template #default>
        <el-row style="margin: 10px 0;">
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{skuInfo.skuName}}</el-col>
        </el-row>
        <el-row style="margin: 10px 0;">
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
        </el-row>
        <el-row style="margin: 10px 0;">
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{skuInfo.price}}</el-col>
        </el-row>
        <el-row style="margin: 10px 0;">
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag style="margin: 5px;" type="primary" :key="item.id" v-for="item in skuInfo.skuAttrValueList">{{item.valueName }}</el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0;">
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag style="margin: 5px;" type="success" :key="item.id" v-for="item in skuInfo.skuSaleAttrValueList">{{item.saleAttrValueName }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel height="200px" type="card" :interval="4000" trigger="click">
              <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                <img :src="item.imgUrl" style="height: 100%;width: 100%;" alt="">
              </el-carousel-item>
            </el-carousel>
            
          </el-col>
        </el-row>
      </template>
    </el-drawer>
    
  </el-card>
</template>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
